<template>
  <div class="playVideo">
    <div class="nav">
      <div class="item">
        <div class="label"><span>选择文件:</span></div>

        <div class="content">
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="item">
        <div class="label"><span>播放速度:</span></div>
        <div class="content">
          <el-slider size="mini" v-model="playbackSpeed" :min="1" :max="5" show-stops></el-slider>
        </div>
      </div>
      <div class="itemSquare">
        <el-tooltip effect="dark" content="后一张" placement="top">
          <i class="el-icon-d-arrow-left" @click="back"></i>
        </el-tooltip>
      </div>

      <div class="itemSquare">
        <el-tooltip effect="dark" content="暂停" placement="top">
          <i class="el-icon-video-pause" @click="suspend"></i>
        </el-tooltip>
      </div>

      <div class="itemSquare">
        <el-tooltip effect="dark" :content="status ? '播放' : '继续'" placement="top">
          <i class="el-icon-video-play" @click="play"></i>
        </el-tooltip>
      </div>
      <div class="itemSquare">
        <el-tooltip effect="dark" content="下一张" placement="top">
          <i class="el-icon-d-arrow-right" @click="next"></i>
        </el-tooltip>
      </div>

      <div class="itemSquare">
        <el-tooltip effect="dark" content="重置" placement="top">
          <i class="el-icon-refresh-right" @click="reset"></i>
        </el-tooltip>
      </div>
      <div class="itemBox">
        当前第
        <span :style="{ color: 'red', 'line-height': '40px' }">{{ currentIndex + 1 }}</span> 张
      </div>
      <div class="itemSquare">
        共 <span :style="{ color: 'red', 'line-height': '40px' }">{{ imgList.length }}</span> 张
      </div>
    </div>

    <div class="pictureArea" ref="imgWrap" @mousewheel.prevent="rollImg">
      <img
        ref="image"
        style="width: 100%; height: 100%"
        :src="currentUrl"
        @mousedown.prevent="moveImg"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'playVideo',
  components: {},
  props: {},
  data() {
    return {
      time: null,
      status: true, //播放还是继续 播放为true
      currentUrl: '',
      currentIndex: 0, //图标下标
      playbackSpeed: 5, //播放速度
      imgList: [
        'https://img2.baidu.com/it/u=2314180063,1037648491&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
        'https://img0.baidu.com/it/u=1273884845,3004361681&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=429',
        'https://img1.baidu.com/it/u=940298460,3939322364&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=355',
        'https://img1.baidu.com/it/u=1677863685,313552565&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500',
        'https://img1.baidu.com/it/u=751261854,2582397976&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        'https://img0.baidu.com/it/u=1738914286,2178267221&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=378',
        'https://img0.baidu.com/it/u=1403413093,2701651371&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    this.init();
  },
  methods: {
    init() {
      this.currentUrl = this.imgList[this.currentIndex];
    },
    // 上一张
    back() {
      if (this.currentIndex - 1 < 0) {
        this.$message.error('已经是第一张了');

        return true;
      }
      this.currentIndex--;
      this.currentUrl = this.imgList[this.currentIndex];
    },
    // 下一张
    next() {
      if (this.currentIndex == this.imgList.length - 1) {
        this.$message.error('已经是最后一张了');
        return true;
      }

      this.currentIndex++;
      this.currentUrl = this.imgList[this.currentIndex];
    },

    // 重置
    reset() {
      clearInterval(this.time);
      this.time = null;
      this.currentIndex = 0;
      this.playbackSpeed = 5;
      this.currentUrl = this.imgList[this.currentIndex];
    },

    play() {
      this.status = true; //播放为true
      //  time 有值表示定时器运行中
      if (this.time) {
        this.$message.error('正在播放');
        return;
      }

      const timeInterval = (6 - this.playbackSpeed) * 1000;

      const listLength = this.imgList.length - 1;
      //  播放完毕
      if (this.currentIndex == listLength) {
        clearInterval(this.time);
        this.time = null;
        this.$message('已是最后一张');
      } else {
        this.time = setInterval(() => {
          this.currentUrl = this.imgList[this.currentIndex + 1];
          this.currentIndex++;
          if (this.currentIndex == listLength) {
            clearInterval(this.time);
            this.time = null;
            let st = setTimeout(() => {
              this.$message('播放完毕');
              clearTimeout(st);
            }, 700);
          }
        }, timeInterval);
      }
    },
    //  暂停
    suspend() {
      this.status = false;
      clearInterval(this.time);
      this.time = null;
    },

    rollImg(e) {
      let transform = this.$refs.image.style.transform;
      let zoom = transform.indexOf('scale') != -1 ? +transform.split('(')[1].split(')')[0] : 1;
      zoom += e.wheelDelta / 1200;
      if (zoom > 0.1 && zoom < 2) {
        this.$refs.image.style.transform = 'scale(' + zoom + ')';
      }
    },

    moveImg(e) {
      let wrap = this.$refs.imgWrap;
      let img = this.$refs.image;
      let x = e.pageX - img.offsetLeft;
      let y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      wrap.addEventListener('mousemove', move);
      function move(e) {
        img.style.left = e.pageX - x + 'px';
        img.style.top = e.pageY - y + 'px';
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener('mouseup', () => {
        wrap.removeEventListener('mousemove', move);
      });
      // 鼠标离开父级元素，把事件移除
      wrap.addEventListener('mouseout', () => {
        wrap.removeEventListener('mousemove', move);
      });
    },
  },
};
</script>

<style scoped lang="less">
.playVideo {
  height: 100%;
  .nav {
    white-space: nowrap;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      height: 100%;
      width: 200px;
      margin: 0px 10px;
      display: flex;
      align-items: center;
      .label {
        width: 70px;
        font-size: 0.85rem;
      }
      .content {
        width: 130px;
      }
    }

    .itemBox {
      width: 90px;
    }
    .itemSquare {
      height: 100%;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 25px !important;
        cursor: pointer;
        &:hover {
          font-size: 27px !important;
        }
      }
    }
  }

  .pictureArea {
    position: relative;
    height: calc(100% - 50px);
    box-sizing: border-box;
    margin: 5px;
    overflow: hidden;
    img {
      position: absolute;
      cursor: move;
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
    }
  }
}
</style>

<style>
.el-message {
  min-width: 0 !important;
}
</style>
